<script setup>
import { ref } from "vue";
import Tags from "./components/Tags.vue";
import LectureCard from "./components/LectureCard.vue";
import TextUnderColor from "@/components/TextUnderColor.vue";
import { onMounted } from "vue";
import { fetchcoutsenew } from "@/api/course";

const coutseNews = ref([]);
const fetchnew = (type) => {
  fetchcoutsenew(type).then((res) => {
    console.log(res.data.data);

    coutseNews.value = res.data.data;
  });
};

onMounted(() => {
  fetchnew(1);
});

const tagList1 = [
  "全部",
  "计算机专业",
  "Linux运维",
  "后端开发",
  "云计算与大数据",
  "数据库",
  "人工智能",
  "信息安全",
];
const tagList2 = [
  "全部",
  "Python",
  "Linux",
  "Java",
  "C",
  "C++",
  "机器语言",
  "Mysql",
  "PHP",
  "Shell",
];
const tagList3 = [
  "全部",
  "免费",
  "会员",
  "实战",
  "实训",
  "面试",
  "职场",
  "职业",
  "求职",
  "招聘",
];
const tagList4 = ["全部", "初级", "中级", "高级", "资深", "专家"];

const courseDetails = [
  {
    name: "Python研发工程师",
    src: "/public/classes/python.png",
    courseCount: 85,
  },
  {
    name: "Java开发工程师",
    src: "/public/classes/java.png",
    courseCount: 61,
  },
  {
    name: "C++开发工程师",
    src: "/public/classes/c++.png",
    courseCount: 42,
  },
  {
    name: "Linux运维工程师",
    src: "/public/classes/linux.png",
    courseCount: 28,
  },
  {
    name: "web前端工程师",
    src: "/public/classes/web.png",
    courseCount: 1054,
  },
];

const coutseNews2 = [
  {
    title: "JAVA技术开发工程师",
    src: "/public/classes/javaClasses.png",
    people: "1236人学过",
    type: "会员",
    color: "#1b59e2",
  },
  {
    title: "深度学习进阶",
    src: "/public/classes/deepClasses.png",
    people: "987421人学过",
    type: "会员",
    color: "#8446b5",
  },
];
const coutseNews3 = [
  {
    title: "虚幻引擎技术开发",
    src: "/public/classes/xuClasses.png",
    people: "99999999人学过",
    type: "会员",
    color: "#282828",
  },
];
</script>
<template>
  <div>
    <div>
      <Tags :tagsArray="tagList1">
        <template #header>
          <div>
            <div class="tag tag-select flex flex-align-center">
              <svg
                t="1732368799949"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="1569"
                width="20"
                height="20"
              >
                <path
                  d="M675.4816 628.8384m-281.4464 0a281.4464 281.4464 0 1 0 562.8928 0 281.4464 281.4464 0 1 0-562.8928 0Z"
                  fill="#FED1B0"
                  p-id="1570"
                ></path>
                <path
                  d="M950.2208 94.72a30.73536 30.73536 0 0 0-27.4432-24.3712c-12.032-1.0752-295.936-22.784-506.0608 194.56-22.3744 23.1424-41.9328 44.4928-59.136 64.2048l-169.472-6.8608a30.6688 30.6688 0 0 0-29.7472 19.2512L69.12 564.0704c-4.1984 10.4448-2.304 22.3744 4.864 31.0272a30.67904 30.67904 0 0 0 23.6544 11.1104c1.9456 0 3.9424-0.2048 5.9392-0.5632l147.712-29.1328 199.1168 199.1168-27.5968 139.8272c-2.2016 11.0592 1.8432 22.4256 10.5472 29.5936 5.5808 4.6592 12.544 7.0656 19.6096 7.0656 3.84 0 7.7312-0.7168 11.4176-2.2016l222.5664-89.2416a30.64832 30.64832 0 0 0 19.2512-29.7472l-6.8096-167.3216c59.5456-50.688 119.9616-117.2992 162.8672-201.6256 115.3536-226.6112 89.1392-361.6256 87.9616-367.2576zM207.2576 384.512l101.3248 4.096c-1.3312 1.7408-2.56 3.4304-3.8912 5.12-0.0512 0.0512-0.0512 0.1024-0.1024 0.1536-8.3456 11.008-15.7184 21.2992-22.272 30.8224-0.6144 0.9216-1.2288 1.8432-1.8432 2.7136-1.1776 1.6896-2.304 3.3792-3.4304 5.0688-0.8704 1.3312-1.7408 2.6112-2.6112 3.8912-0.8704 1.28-1.7408 2.6112-2.56 3.8912-1.6384 2.56-3.2256 5.0176-4.7616 7.424l-1.0752 1.6896c-1.3312 2.0992-2.56 4.1472-3.7888 6.144l-0.9216 1.536c-1.3312 2.2528-2.6624 4.4032-3.8912 6.5536-0.1024 0.1536-0.2048 0.3072-0.256 0.4608-11.5712 19.8144-18.5856 34.6112-23.3984 44.9024-1.0752 2.304-2.1504 4.5568-3.072 6.4512-0.0512 0.1024-0.1024 0.2048-0.1536 0.256-0.4608 0.8704-0.8192 1.6896-1.2288 2.4064l-82.2272 16.2304L207.2576 384.512z m436.6336 427.2128l-149.9136 60.1088 17.2032-87.3472c25.1392-11.5712 73.472-35.9424 128.512-74.7008l4.1984 101.9392z m163.6352-377.6c-87.6544 172.1856-262.2464 266.1376-318.8224 292.9664L291.84 530.2272c1.0752-2.304 2.2528-4.7104 3.5328-7.3216l0.4608-0.9216c0.512-1.0752 1.0752-2.1504 1.6384-3.2768 11.008-21.7088 30.0032-54.7328 67.2256-102.0928 0.6656-0.8704 1.3312-1.6896 2.048-2.56 1.792-2.2528 3.584-4.5056 5.4272-6.8096 2.7648-3.3792 5.5808-6.8608 8.4992-10.3936 0.9728-1.1776 1.9456-2.3552 2.9184-3.4816 3.5328-4.1984 7.1168-8.4992 10.9056-12.9024l0.0512-0.0512c18.5856-21.76 40.5504-45.9264 66.4064-72.704 154.8288-160.0512 359.936-176.2304 431.104-176.6912 1.024 44.7488-6.912 150.5792-84.5312 303.104z"
                  fill="#4F4F4F"
                  p-id="1571"
                ></path>
                <path
                  d="M702.208 221.9008c-51.5584 0-93.44 41.9328-93.44 93.44 0 51.5584 41.9328 93.4912 93.44 93.4912 51.5584 0 93.4912-41.9328 93.4912-93.4912-0.0512-51.5072-41.9328-93.44-93.4912-93.44z m0 125.4912c-17.664 0-32-14.3872-32-32.0512 0-17.664 14.3872-32 32-32s32.0512 14.3872 32.0512 32c-0.0512 17.664-14.3872 32.0512-32.0512 32.0512zM354.6624 745.3696c-15.5648-6.6048-33.5872 0.6656-40.2432 16.2304-4.1984 9.728-41.216 88.9344-130.0992 77.4656-3.9936-88.7296 78.6432-126.8224 82.5344-128.5632a30.7456 30.7456 0 0 0-24.6784-56.32c-49.7664 21.6576-138.0352 94.72-116.0192 216.0128a30.80192 30.80192 0 0 0 22.3744 24.2176c18.8416 5.0176 36.5568 7.2192 53.0944 7.2192 94.0032 0 150.784-71.7824 169.3696-116.224 6.6048-15.5648-0.768-33.4336-16.3328-40.0384z"
                  fill="#4F4F4F"
                  p-id="1572"
                ></path>
              </svg>
              &nbsp<span class="">方向</span>
            </div>
          </div>
        </template>
      </Tags>
      <br />
      <Tags :tagsArray="tagList2">
        <template #header>
          <div>
            <div
              class="tag tag-select flex flex-align-center"
              style="background-color: #f56c6c"
            >
              <svg
                t="1732370891506"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2320"
                width="20"
                height="20"
              >
                <path
                  d="M659.8656 594.1248m-281.4464 0a281.4464 281.4464 0 1 0 562.8928 0 281.4464 281.4464 0 1 0-562.8928 0Z"
                  fill="#FED1B0"
                  p-id="2321"
                ></path>
                <path
                  d="M512 539.8016c-79.7696 0-144.6912-64.9216-144.6912-144.6912S432.2304 250.4192 512 250.4192s144.6912 64.9216 144.6912 144.6912-64.9216 144.6912-144.6912 144.6912z m0-227.9424c-45.9264 0-83.2512 37.376-83.2512 83.2512s37.376 83.2512 83.2512 83.2512 83.2512-37.376 83.2512-83.2512-37.3248-83.2512-83.2512-83.2512z"
                  fill="#4F4F4F"
                  p-id="2322"
                ></path>
                <path
                  d="M512 841.5232c-6.9632 0-13.9264-2.3552-19.6096-7.1168-206.4384-171.5712-311.1424-319.3344-311.1424-439.296 0-182.3744 148.3776-330.752 330.752-330.752s330.752 148.3776 330.752 330.752c0 112.4352-98.6112 251.8528-310.4256 438.7328-5.7856 5.12-13.056 7.68-20.3264 7.68z m0-715.7248c-148.48 0-269.312 120.7808-269.312 269.312 0 95.7952 92.7744 225.1776 268.6976 375.0912 179.0976-161.1264 269.8752-287.2832 269.8752-375.0912 0.0512-148.48-120.7808-269.312-269.2608-269.312z"
                  fill="#4F4F4F"
                  p-id="2323"
                ></path>
                <path
                  d="M512 963.9936c-161.792 0-435.6096-27.9552-435.6096-132.7104 0-51.2512 64.1536-89.088 190.72-112.4864 16.6912-3.072 32.7168 7.936 35.7888 24.6272 3.072 16.6912-7.936 32.7168-24.6272 35.7888-101.4784 18.7392-134.912 43.3152-140.0832 52.0192 4.4032 7.2192 30.4128 27.5456 107.1104 45.2096 72.6528 16.7936 167.3728 26.0096 266.7008 26.0096s194.0992-9.216 266.7008-26.0096c76.6976-17.7152 102.7072-37.9904 107.1104-45.2608-5.3248-9.0624-40.6016-34.6624-148.3264-53.504-16.6912-2.9184-27.904-18.8416-24.9856-35.5328 2.9184-16.6912 18.8416-27.904 35.5328-24.9856 132.4544 23.1936 199.5776 61.5424 199.5776 114.0736 0 104.8064-273.8176 132.7616-435.6096 132.7616z m374.3232-131.6352z"
                  fill="#4F4F4F"
                  p-id="2324"
                ></path>
              </svg>
              &nbsp<span class="">标签</span>
            </div>
          </div>
        </template>
      </Tags>
      <br />
      <Tags :tagsArray="tagList3">
        <template #header>
          <div>
            <div
              class="tag tag-select flex flex-align-center"
              style="background-color: #fd8d3f"
            >
              <svg
                t="1732371050380"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2593"
                width="20"
                height="20"
              >
                <path
                  d="M646.4512 627.5584m-298.1888 0a298.1888 298.1888 0 1 0 596.3776 0 298.1888 298.1888 0 1 0-596.3776 0Z"
                  fill="#C7ACEF"
                  p-id="2594"
                ></path>
                <path
                  d="M467.6096 962.5088c-34.4064 0-68.7616-13.1072-94.976-39.2704l-276.48-276.48c-52.3776-52.3776-52.3776-137.5744 0-189.9008L465.4592 87.552a105.216 105.216 0 0 1 76.8512-30.6176l308.6336 8.3456c55.3472 1.4848 100.096 46.0288 101.7856 101.376l9.5744 310.1696c0.8704 28.7744-10.2912 56.9344-30.6176 77.2608l-369.2032 369.2032c-26.112 26.112-60.4672 39.2192-94.8736 39.2192z m71.8848-844.1856c-11.4176 0-22.4768 4.5568-30.5664 12.6464L139.6224 500.2752c-28.416 28.416-28.416 74.6496 0 103.0144l276.48 276.48c28.416 28.416 74.6496 28.416 103.0144 0l369.2032-369.2032a43.4176 43.4176 0 0 0 12.6464-31.8976l-9.5744-310.1696c-0.7168-22.8864-19.2-41.2672-42.0352-41.8816l-308.6336-8.3456c-0.4608 0.0512-0.8192 0.0512-1.2288 0.0512z"
                  fill="#4F4F4F"
                  p-id="2595"
                ></path>
                <path
                  d="M676.4032 445.5424c-62.208 0-112.8448-50.6368-112.8448-112.8448s50.6368-112.8448 112.8448-112.8448c62.208 0 112.8448 50.6368 112.8448 112.8448s-50.6368 112.8448-112.8448 112.8448z m0-164.1984c-28.3648 0-51.4048 23.04-51.4048 51.4048s23.04 51.4048 51.4048 51.4048c28.3648 0 51.4048-23.04 51.4048-51.4048s-23.0912-51.4048-51.4048-51.4048z"
                  fill="#4F4F4F"
                  p-id="2596"
                ></path>
              </svg>
              &nbsp<span class="">类型</span>
            </div>
          </div>
        </template>
      </Tags>
      <br />
      <Tags :tagsArray="tagList4">
        <template #header>
          <div>
            <div
              class="tag tag-select flex flex-align-center"
              style="background-color: #1ed493"
            >
              <svg
                t="1732371299071"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2859"
                width="20"
                height="20"
              >
                <path
                  d="M660.8384 641.4336m-281.4464 0a281.4464 281.4464 0 1 0 562.8928 0 281.4464 281.4464 0 1 0-562.8928 0Z"
                  fill="#C0E1C6"
                  p-id="2860"
                ></path>
                <path
                  d="M944.2304 852.992l-264.448-457.3184c-0.9728-1.6896-1.4848-3.584-1.4848-5.4784V127.4368h36.3008c16.9472 0 30.72-13.7728 30.72-30.72s-13.7728-30.72-30.72-30.72H305.664c-16.9472 0-30.72 13.7728-30.72 30.72s13.7728 30.72 30.72 30.72h38.8096v262.912c0 1.8944-0.512 3.7888-1.4336 5.4272l-259.7888 457.728c-12.8512 22.6816-12.7488 49.664 0.4096 72.192 13.1072 22.528 36.5056 35.9936 62.5664 35.9936h735.3344c26.2144 0 49.664-13.568 62.72-36.2496 13.1072-22.6816 13.056-49.7664-0.0512-72.448zM396.4416 426.1376c6.1952-10.8544 9.4208-23.2448 9.4208-35.7376V127.4368h210.944v262.7584c0 12.6976 3.3792 25.2416 9.728 36.2496l85.9136 148.5824c-62.208-16.8448-141.9264-19.3024-211.6608 18.0736-69.9904 37.4784-159.232 20.0704-203.3664 7.5264l99.0208-174.4896z m494.6432 468.6336c-1.1776 2.048-3.9936 5.4784-9.5232 5.4784H146.2272c-5.4784 0-8.2944-3.4304-9.472-5.4784-1.1776-2.048-2.7648-6.144-0.0512-10.9568l129.6384-228.4032c26.3168 8.4992 76.544 21.8112 133.12 21.8112 42.3936 0 88.32-7.4752 130.4064-30.0032 98.3552-52.6848 220.5184 2.5088 234.0864 18.688 0.9216 1.1264 1.9456 2.1504 2.9696 3.1232l124.16 214.6816c2.7136 4.864 1.1776 9.0112 0 11.0592z"
                  fill="#4F4F4F"
                  p-id="2861"
                ></path>
              </svg>
              &nbsp<span class="">难度</span>
            </div>
          </div>
        </template>
      </Tags>
    </div>
    <br />
    <br />
    <!-- 白色条目 -->
    <div>
      <div class="course-list">
        <div
          v-for="(course, index) in courseDetails"
          :key="index"
          class="course-link"
        >
          <img :src="course.src" alt="" class="course-image" />
          <div class="course-name">
            {{ course.name }}
          </div>
          <div class="course-count">{{ course.courseCount }}门课程</div>
        </div>
      </div>
    </div>
    <br />
    <!-- 选项卡 -->
    <div class="flex flex-align-center">
      <svg
        t="1732373965451"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="3600"
        width="32"
        height="32"
      >
        <path
          d="M591.104 598.1184m-281.4464 0a281.4464 281.4464 0 1 0 562.8928 0 281.4464 281.4464 0 1 0-562.8928 0Z"
          fill="#90D4DD"
          p-id="3601"
        ></path>
        <path
          d="M749.7728 146.7392h-16.128c-10.496-48.128-53.4016-84.3264-104.6528-84.3264H401.5104c-51.2512 0-94.1568 36.1984-104.6528 84.3264h-16.128c-90.3168 0-163.84 73.472-163.84 163.84v476.928c0 90.3168 73.5232 163.84 163.84 163.84h469.0944c90.3168 0 163.84-73.5232 163.84-163.84V310.5792c-0.0512-90.368-73.5744-163.84-163.8912-163.84z m-394.0352 22.8864c0-25.2416 20.5312-45.7728 45.7728-45.7728h227.4816c25.2416 0 45.7728 20.5312 45.7728 45.7728v28.7744c0 25.2416-20.5312 45.7728-45.7728 45.7728H401.5104c-25.2416 0-45.7728-20.5312-45.7728-45.7728v-28.7744z m496.4352 617.8816c0 56.4736-45.9264 102.4-102.4 102.4H280.6784c-56.4736 0-102.4-45.9264-102.4-102.4V310.5792c0-56.4736 45.9264-102.4 102.4-102.4h14.1312c4.9664 54.528 50.8928 97.3824 106.7008 97.3824h227.4816c55.808 0 101.7344-42.8544 106.7008-97.3824h14.1312c56.4736 0 102.4 45.9264 102.4 102.4v476.928z"
          fill="#4F4F4F"
          p-id="3602"
        ></path>
        <path
          d="M476.3648 688.2816c-0.7168 0-1.4336 0-2.1504-0.0512-17.7664-0.6144-34.7136-8.6016-46.4896-21.9136-0.1536-0.2048-0.3072-0.3584-0.4608-0.5632l-92.7744-110.0288c-10.9568-12.9536-9.2672-32.3584 3.6864-43.3152a30.70464 30.70464 0 0 1 43.3152 3.6864l92.416 109.6192c0.6656 0.6656 1.4848 1.024 2.4576 1.0752 1.024 0.1536 1.8944-0.3072 2.6112-1.024l181.76-184.576c11.9296-12.0832 31.3344-12.2368 43.4688-0.3584s12.2368 31.3344 0.3584 43.4688l-182.0672 184.8832c-12.544 12.288-29.1328 19.0976-46.1312 19.0976z"
          fill="#4F4F4F"
          p-id="3603"
        ></path>
      </svg>
      <TextUnderColor
        :text="'大家在学'"
        style="margin: 1rem 0"
      ></TextUnderColor>
    </div>
    <el-tabs type="border-card" tab-position="top" class="demo-tabs">
      <el-tab-pane style="padding: 1rem">
        <template #label>
          <span
            class="custom-tabs-label flex flex-center gap-10"
            @click="fetchnew(1)"
          >
            <el-icon size="20"><calendar /></el-icon>
            <span>最新</span>
          </span>
        </template>
        <div class="flex gap-40 gird-4">
          <div v-for="(course, index) in coutseNews">
            <LectureCard :array="course"></LectureCard>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane>
        <template #label>
          <span
            class="custom-tabs-label flex flex-center gap-10"
            @click="fetchnew(2)"
          >
            <el-icon size="20"><GoldMedal /></el-icon>
            <span>最热</span>
          </span>
        </template>
        <div
          class="flex gap-40 gird-4"
          style="padding: 1rem"
          @click="fetchnew(2)"
        >
          <div v-for="(course, index) in coutseNews">
            <LectureCard :array="course"></LectureCard>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane>
        <template #label>
          <span
            class="custom-tabs-label flex flex-center gap-10"
            @click="fetchnew(3)"
          >
            <el-icon size="20"><PartlyCloudy /></el-icon>

            <span>最好</span>
          </span>
        </template>
        <div class="flex gap-40 gird-4" style="padding: 1rem">
          <div v-for="(course, index) in coutseNews">
            <LectureCard :array="course"></LectureCard>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.tag-select {
  border-radius: 2rem;
  color: #fff !important;
  background-color: #409eff;
}
.tag {
  font-size: 0.9rem;
  font-weight: 300;

  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 100px;
}
.course-list {
  background: rgba(255, 255, 255, 0.8);
  font-weight: 300;
  border-radius: 10px;
  color: #333;
  box-shadow: 4px 4px 4px rgb(221.7, 222.6, 224.4, 0.9);
  display: flex;
  justify-content: space-around;
  padding: 1rem;
  align-items: center;
}
.course-link {
  cursor: pointer;
  padding: 1rem;
  transition: background-color 0.3s;
  border-radius: 10px;
}

.course-link:hover {
  background-color: #3787f4;
  color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.course-link:hover .course-count {
  color: #fff;
}

.course-image {
  margin: 0 10px;
  width: 48px;
}

.course-name {
  font-size: 14px;

  margin-bottom: 5px;
  max-width: 116px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-count {
  color: #999;
  font-size: 12px;
  font-weight: 400;
}
</style>
